<template>
  <div class="application">
    <div class="filter-group" ref="scroll" v-if="(!curMenu.labelType && appList.length > 1) || (curMenu.labelType && appList.length > 0)">
      <div class="scroll-content">
        <div class="group-item" :class="{ active: index == activeIndex }" v-focusable v-for="(item, index) in appList" :key="index" @longPress="eventCloudChange(item, index)" @click="eventCloudChange(item, index)" :id="`fcous-${index}`">
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ApplicationDao from '@/daos/application';
import BScroll from 'better-scroll';
export default {
  name: 'application',
  data() {
    return {
      mouseOffset: 0,
      labelType: 0,
      stop: false,
      fullscreen: false,
      moduleManageId: '25',
      scroll: null,
      appList: [],
      sysApp: {
        id: '-1',
        updateTime: new Date(),
        cloudPageType: 3,
        showSort: 0,
        cloudPageId: '-1',
        name: '系统板块',
        imgUrl: '',
      },
      filterForm: {
        nav: 2,
        name: '',
        show: false,
      },
      iframeSrc: '',
      activeIndex: 0,
    };
  },
  created() {
    let { moduleId } = this.$route.query;
    if (moduleId && this.moduleId != moduleId) {
      this.moduleId = moduleId;
      this.getAppList();
    } else if (moduleId && this.applicationList.length) {
      if (!this.curMenu.labelType) {
        this.appList.unshift(this.sysApp);
      }
      this.appList.push(...this.applicationList);
      this.init();
    }
  },
  mounted() {
    setTimeout(() => {
      const em = document.querySelector(`#fcous-${this.activeIndex}`)
      if (em) {
        this.$tv.requestFocus(em);
      }
    }, 1000);
  },
  computed: {
    curCloud() {
      return this.appList[this.activeIndex];
    },
    appMenuList() {
      return this.$store.state.appMenuList;
    },
    application() {
      return this.$store.state.application;
    },
    applicationList() {
      return this.$store.state.applicationList;
    },
    curMenu() {
      let result = this.appMenuList.find((e) => e.id === this.moduleId);
      return result || {};
    },
  },
  watch: {
    applicationList() {
      const { cid } = this.$route.query;
      let index = this.applicationList.findIndex((e) => e.cloudPageId === cid);
      if (index > -1) {
        this.activeIndex = !this.curMenu.labelType ? index + 1 : index;
      } else if (cid === '') {
        this.activeIndex = !this.curMenu.labelType ? index + 1 : index;
        this.handleCloudChange(this.applicationList[0]);
      }
      //   this.$nextTick(()=>{
      //   console.log(document.querySelector(`#fcous-${this.activeIndex}`));
      //   this.$tv.requestFocus(document.querySelector(`#fcous-${this.activeIndex}`))
      // })
    },
  },
  methods: {
    eventFullscreen() {
      this.fullscreen = !this.fullscreen;
    },
    init() {
      this.$nextTick(() => {
        if (this.$refs.scroll) {
          this.scroll = new BScroll(this.$refs.scroll, { click: true, scrollX: true, probeType: 0, bounce: false, bounceTime: 0 });
        }
      });
    },
    getAppList() {
      ApplicationDao.getModuleCloudConfig(
        { moduleManageId: this.moduleId },
        (res) => {
          if (res.data && res.data.length) {
            if (!this.curMenu.labelType) {
              this.appList.unshift(this.sysApp);
            }
            this.appList.push(...res.data);
            this.$store.commit('setApplicationList', res.data);
            this.init();
          }
        },
        true
      );
    },
    eventCloudChange(item, index = 0) {
      this.activeIndex = index;
      this.handleCloudChange(item);
    },
    handleCloudChange(item) {
      let data = this.$store.state.application;
      let menu = this.$store.state.appMenuList;
      let { path } = this.$route;

      if (item.id === '-1') {
        if (!data.pageId) {
          const g6menu = localStorage.getItem('g6menu') || '';
          try {
            let data = JSON.parse(g6menu);
            this.$router.replace(
              { path: data.pageId, query: { moduleId: data.moduleId } },
              () => {},
              () => {}
            );
          } catch (error) {
            this.$router.replace(
              { path: '/' },
              () => {},
              () => {}
            );
          }
        } else {
          this.$router.replace(
            { path: data.pageId, query: { moduleId: this.moduleId } },
            () => {},
            () => {}
          );
        }
      } else {
        let result = menu.find((e) => e.id === this.moduleId);
        if (result && !path.includes('g6issue')) {
          let app = {
            pageId: path,
            cloudPageId: item.cloudPageId,
            moduleId: result.id,
            pageName: result.name,
          };
          this.$store.commit('setApplication', app);
          localStorage.setItem('g6menu', JSON.stringify(app));
        }
        this.$router.replace(
          { name: 'g6issue', query: { moduleId: this.moduleId, cid: item.cloudPageId } },
          () => {},
          () => {}
        );
      }
    },
    eventTitleClick() {
      this.filterForm.show = true;
    },
    handleFilter(item, index) {
      this.eventCloudChange(item, index);
    },
  },
};
</script>
<style>
.focus {
  border: 2px solid red !important;
}
</style>

<style lang="less" scoped>
.application {
  background-color: #18182c;

  .filter-group {
    padding: 2px 0;
    width: 95vw;
    padding-left: 8px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
  }

  .group-item {
    color: #456de6;
    font-size: 12px;
    padding: 2px 12px 3px;
    margin: 0 4px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #456de6;
    display: inline-block;

    span {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &.overdue {
      color: #f5a623;
      border: 1px solid #f5a623;
    }

    &.active {
      color: #fff;
      background: #456de6;
      border: 1px solid #456de6;

      &.overdue {
        color: #fff;
        background: #f5a623;
        border: 1px solid #f5a623;
      }
    }
  }

  .scroll-content {
    display: inline-block;
  }

  // display: flex;
  .iu-el-tab-item {
    padding: 0 20px;
    height: 32px;
    box-sizing: border-box;
    line-height: 32px;
    display: inline-block;
    list-style: none;
    font-size: 14px;
    color: #fff;
    background: #191a2f;
    position: relative;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    &.selected {
      background: #456de6;
    }
  }
}
</style>
